<template>
  <div class="boxContent">
    <div class="appBox">
      <div class="searchList">
        <el-form :model="state.params"
                 ref="FormInstance "
                 class="boxFrom">
          <div class="searchBox">
            <template v-for="(item, index) in state.totalInputColumns"
                      :key="index">
              <el-form-item v-if="item.type == 'input'">
                <el-input clearable
                          v-model="state.params[item.key]"
                          :placeholder="item.label"></el-input>
              </el-form-item>
              <el-form-item v-if="item.type == 'select'">
                <el-date-picker v-if="item.key == 'time'"
                                v-model="state.time"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始时间"
                                value-format="YYYY-MM-DD"
                                end-placeholder="结束时间" />
                <el-select v-model="state.params[item.key]"
                           :placeholder="item.label"
                           clearable
                           v-if="item.key == 'companyType'">
                  <el-option label="代招工企业"
                             value="1" />
                  <el-option label="直属用工企业"
                             value="0" />
                </el-select>
                <el-select v-model="state.params[item.key]"
                           :placeholder="item.label"
                           clearable
                           v-if="item.key == 'status'">
                  <el-option label="正常"
                             value="0" />
                  <el-option label="停用"
                             value="1" />
                  <el-option label="即将欠费"
                             value="2" />
                  <el-option label="欠费"
                             value="3" />
                </el-select>

              </el-form-item>
            </template>
          </div>

          <el-form-item class="btns">
            <el-form-item class="btns">
              <el-button v-preventReClick
                         @click="methods.handleAction('export')"
                         v-permission="1138"
                         type="primary">导出</el-button>
              <el-button v-preventReClick
                         @click="methods.handleAction('query')"
                         type="primary"
                         plain>查询</el-button>
              <el-button v-preventReClick
                         @click="methods.handleAction('reset')">重置</el-button>
            </el-form-item>
          </el-form-item>
        </el-form>
      </div>
      <div class="tabaleBox">
        <el-table border
                  v-loading="state.loading"
                  :data="state.tableData"
                  style="width: 100%"
                  :header-cell-style="{ color: '#000' }">
          <el-table-column prop="dayCount"
                           label="日期"
                           show-overflow-tooltip
                           align="center"
                           width="180" />
          <el-table-column prop="companyName"
                           label="企业名称"
                           show-overflow-tooltip
                           align="center" />
          <el-table-column prop="userClockCount"
                           label="打卡人数"
                           show-overflow-tooltip
                           align="center" />
          <el-table-column prop="userVacationCount"
                           label="休假人数"
                           show-overflow-tooltip
                           align="center" />
          <el-table-column prop="userUndutyCount"
                           label="未到岗人数"
                           show-overflow-tooltip
                           align="center">
          </el-table-column>
          <el-table-column prop="companyAmount"
                           label="企业余额"
                           show-overflow-tooltip
                           align="center" />
          <el-table-column prop="useAmount"
                           label="昨日扣款"
                           show-overflow-tooltip
                           align="center" />
          <el-table-column prop="totalUseAmount"
                           label="累计消耗 "
                           show-overflow-tooltip
                           align="center" />
          <el-table-column prop="status"
                           label="当前状态"
                           show-overflow-tooltip
                           align="center">
            <template #default="scoped">
              <span v-if="scoped.row.status == 0"
                    class="success">正常</span>
              <span v-if="scoped.row.status == 1"
                    class="info">停用</span>
              <span v-if="scoped.row.status == 2"
                    class="warning">即将欠费</span>
              <span v-if="scoped.row.status == 3"
                    class="error">欠费</span>
            </template>
          </el-table-column>
          <el-table-column prop="mname"
                           label="负责人"
                           show-overflow-tooltip
                           align="center">
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <el-pagination background
                       v-model:current-page="state.params.pageNum"
                       v-model:page-size="state.params.pageSize"
                       :page-sizes="[10, 20, 30, 50]"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="state.totalSize"
                       @size-change="methods.handleSizeChange"
                       @current-change="methods.handleCurrentChange" />
      </div>

    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, getCurrentInstance } from "vue";
import { ElMessage, ElLoading, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
const router = useRouter();
const app = getCurrentInstance()?.proxy;
const initState = () => {
  return {
    loading: false,
    totalSize: 0,
    tableData: [],
    time: [],
    params: {
      pageNum: 1,
      pageSize: 10,
    },
    totalInputColumns: [
      { key: "companyName", label: "填写企业名称", type: "input" },
      { key: "companyType", label: "代招企业", type: "select" },
      { key: "status", label: "企业状态", type: "select" },
      { key: "time", label: "选择时间", type: "select" },
    ],

  };
};
const state = reactive(initState());
onMounted(() => {

  methods.getDataList();
});
const methods = {

  handleAction (type, data) {
    switch (type) {

      case "export": //查询
        methods.export();
        break;
      case "query": //查询
        methods.getDataList();
        break;
      case "reset": // 重置
        state.time = []
        state.params = initState().params;
        break;

    }
  },
  // 导出
  export () {
    let data = JSON.parse(JSON.stringify(state.params))
    if (state.time && state.time.length - 0 > 0) {
      data.startTime = state.time[0]
      data.endTime = state.time[1]
    } else {

    }
    app.$http.post(
      '/company/exportCompanyClockCount', data, {
      responseType: 'arraybuffer'
    }).then((res) => {
      if (res) {
        console.log(res);
        app.$parse.downloadExcel(res, '打卡列表数据')
      }
    });
  },
  getDataList () {
    let data = JSON.parse(JSON.stringify(state.params))
    if (state.time && state.time.length - 0 > 0) {
      data.startTime = state.time[0]
      data.endTime = state.time[1]
    } else {

    }
    state.loading = true
    app.$http.post("/company/companyClockCountList", data).then((res) => {
      state.tableData = res.data.list;
      state.totalSize = res.data.total;
      state.loading = false
    }).catch(() => {
      state.loading = false
    })
  },
  //分页变化
  handleSizeChange () {
    state.params.pageNum = 1;
    methods.getDataList();
  },
  //表格翻页
  handleCurrentChange () {
    methods.getDataList();
  },
};
</script>

<style lang="scss" scoped>
.appBox {
  .tabaleBox {
    overflow: hidden;
    flex: 1;
  }
  .btnsDatil {
    color: #0079fe;
    cursor: pointer;
    align-items: center;
  }
  .pagination {
    margin-top: 20px;
    height: 50px;
    display: flex;
    justify-content: flex-end;
  }
  ::v-deep(.el-dialog__body) {
    max-height: 380px;
  }
  .imgs {
    flex-wrap: wrap;
    .forbox {
      height: 150px;
      margin: 10px 0 0 10px;
    }
    .imgBox {
      height: 100%;
      width: auto;
    }
    .videoBox {
      width: auto;
      height: 100%;
    }
  }
}
</style>
